<template>
    <div id="search-model">
        <template v-if="searchInfo.length !== 0" v-for="(item, index) in searchInfo" :key="index">
            <template v-if="typeVal === 'input' && typeId === item.typeId">
                <el-input :type="item.typeNam" :placeholder="item.placeholder" v-model="item.defaultVal" />
            </template>
            <template v-if="typeVal === 'date' && typeId === item.typeId">
                <el-date-picker
                    v-model="item.defaultVal"
                    type="date"
                    value-format="YYYY-MM-DD"
                    :placeholder="item.placeholder">
                </el-date-picker>
            </template>
            <template v-if="typeVal === 'datetime' && typeId === item.typeId">
                <el-date-picker
                    v-model="item.defaultVal"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    popper-class="el-date-p"
                    :placeholder="item.placeholder"
                >
                </el-date-picker>
            </template>
            <template v-if="typeVal === 'select' && typeId === item.typeId">
                <el-select 
                    filterable
                    :placeholder="item.placeholder" 
                    v-model="item.defaultVal" 
                    @change="handleEvent(item)"
                >
                    <el-option
                        v-for="val in item.defaultProp"
                        :key="val.value"
                        :label="val.label"
                        :value="val.value"
                    />
                </el-select>
            </template>
            <template v-if="typeVal === 'datetimerange' && typeId === item.typeId">
                <el-date-picker
                    v-model="item.defaultVal"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    popper-class="el-date-p"
                />
            </template>
            <template v-if="typeVal === 'daterange' && typeId === item.typeId">
                <el-date-picker
                    v-model="item.defaultVal"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                    popper-class="el-date-p"
                />
            </template>
            <template v-if="typeVal === 'cascader' && typeId === item.typeId">
                <el-cascader
                    v-model="item.defaultVal"
                    :options="item.defaultProp" 
                    :props="item.propsVal"
                    clearable 
                />
            </template>
        </template>
    </div>
</template>
<script lang="ts">
/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {}
import { defineComponent, ref, Ref, onMounted , reactive , watch, nextTick , toRefs , watchEffect } from 'vue';

export default defineComponent({
    name: 'search-model',
    components: {},
    props: {
        typeVal: {
            type: String,
            default: ''
        },
        typeId: {
            type: String,
            default: ''
        },
        basicsInfo: {
            type: Array,
            default: []
        },
    },
    setup(props,ctx){
        const ruleFormRef = ref();
        const searchInfo: any = ref([]);

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        });

        const handleEvent = (val: any) => {
            console.log(val,'val12')
        };

        watch(() => searchInfo.value , (newVal , oldVal) => {
            if(Object.keys(newVal).length !== 0 && Object.keys(oldVal).length !== 0 ){
                let searchObj: any = {};
                newVal.map((item: any) => {
                    if(!item.searchVal){
                        if(Array.isArray(item.defaultVal)){
                            searchObj[item.searchValMin] = item.defaultVal[0];
                            searchObj[item.searchValMax] = item.defaultVal[1];
                        }else{
                            searchObj[item.searchValMin] = '';
                            searchObj[item.searchValMax] = '';
                        }
                    }else{
                        if(Array.isArray(item.defaultVal)){
                            let len = item.defaultVal.length;
                            searchObj[item.searchVal] = item.defaultVal[len - 1];
                        }else{
                            searchObj[item.searchVal] = item.defaultVal;
                        }
                    }
                });
                ctx.emit('searchHandel',searchObj);
            }
        },{ deep: true });

        onMounted(() => {
            nextTick(() => {
                watchEffect(() => {
                    let item = props.basicsInfo;
                    if(item.length !== 0){
                        searchInfo.value = props.basicsInfo;
                    }
                });
            });
        });
        return {
            ruleFormRef,
            ...toRefs(state),
            searchInfo,
            handleEvent,
        }
    }
})
</script>
<style scoped lang="scss">
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
:deep(.el-input__wrapper){
    width: 100%; 
}
</style>